import { defineComponent, ref, Teleport, onMounted, onBeforeUnmount, computed, } from "vue";
import styles from "./header.module.less";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  SearchOutlined,
  BellOutlined,
  ExpandOutlined,
  CompressOutlined,
  ReloadOutlined,
  LoadingOutlined,
  UserOutlined,
  DownOutlined,
} from '@ant-design/icons-vue';
import useNavigator from "@/hooks/useNavigator";
import screenfull from 'screenfull';
import MenuSearch from "./menuSearch/menuSearch";
import { message } from 'ant-design-vue';
import { useStore as useTagsStore } from "@/store/tags";
import { useStore as useUserStore } from "@/store/user";
export default defineComponent({
  name: 'Header',
  props: ['collapsed'],
  emits: ['update:collapsed'],
  setup(props, { emit }) {
    const navigater = useNavigator();
    const tagsStore = useTagsStore();
    const userStore = useUserStore();
    // 菜单收缩按钮
    const MenuFold = () => (
      <div class={styles.menuFold} onClick={() => { emit('update:collapsed', !props.collapsed) }}>
        {
          props.collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />
        }
      </div>
    )
    // 跳转
    const navTo = (name: string) => {
      if (name === navigater.route.name) {
        return;
      }
      navigater.push({
        name,
      })
    }
    // 面包屑点击
    const breadItemClickHandler = (e: any) => {
      navTo(e.name);
    }
    // 面包屑
    const Breadcrumb = () => (
      <div class={styles.breadcrumb}>
        {
          navigater.route.matched.map((x: any, idx) => (
            <div class={styles.breadcrumbItem} onClick={() => { idx < navigater.route.matched.length - 1 && breadItemClickHandler(x) }}>
              {
                x.meta?.icon && <x.meta.icon class={styles.icon} />
              }
              <span>{x.meta.title}</span>
            </div>
          ))
        }
      </div>
    )
    // 左边部分
    const Left = () => (
      <>
        <MenuFold />
        <Breadcrumb />
      </>
    )


    const menuSearchVisible = ref(false);

    // 搜索菜单
    const toSearchMenu = () => {
      menuSearchVisible.value = true;
    }

    // 消息数
    const dot_num = ref(3);

    // 是否全屏
    const isScreenFull = ref(false);
    // 切换全屏状态
    const isScreenFullChange = () => {
      isScreenFull.value = screenfull.isFullscreen;
    }
    // 监听屏幕全屏
    onMounted(() => {
      if (screenfull.isEnabled) {
        screenfull.on('change', isScreenFullChange);
      }
    })
    onBeforeUnmount(() => {
      if (screenfull.isEnabled) {
        screenfull.off('change', isScreenFullChange);
      }
    })
    // 全屏切换
    const setScreenfull = () => {
      if (!screenfull.isEnabled) {
        message.error('浏览器不支持全屏!');
        return;
      }
      screenfull.toggle();
    }

    // 刷新中
    const refreshing = ref(false);
    // 刷新main部分页面
    const refreshPage = () => {
      refreshing.value = true;
      tagsStore.refresh(navigater.route.name, () => {
        refreshing.value = false;
      })
    }

    // 头像hover小弹窗
    const avatar_menu = [
      {
        label: '退出登录',
        click: () => {
          userStore.logout();
          let redirect = navigater.route.fullPath;
          navigater.push(`/login`);
        },
      },
    ];
    const userInfo: any = computed(() => {
      return userStore.userinfo;
    })
    // 右边部分
    const Right = () => (
      <>
        <div class={styles.icon} title="菜单搜索" onClick={() => { toSearchMenu() }}>
          <SearchOutlined />
        </div>
        <div class={styles.icon} title={isScreenFull.value ? '退出全屏' : '全屏'} onClick={() => { setScreenfull() }}>
          {
            isScreenFull.value ? <CompressOutlined /> : <ExpandOutlined />
          }
        </div>
        <div class={styles.icon} title="刷新" onClick={() => { refreshPage() }}>
          {
            refreshing.value ? <LoadingOutlined /> : <ReloadOutlined />
          }
        </div>
        <a-dropdown v-slots={{
          overlay: () => {
            return (
              <a-menu class={styles.dropdown}>
                {
                  avatar_menu.map(x => (
                    <a-menu-item key={x.label} onClick={() => x.click()}>{x.label}</a-menu-item>
                  ))
                }
              </a-menu>
            )
          }
        }}>
          <div class={styles.avatar}>
            <a-avatar size={24} v-slots={{
              icon: () => {
                return (
                  userInfo.value.head_img ? <img src={userInfo.value.head_img} /> : <UserOutlined />
                )
              }
            }}>
            </a-avatar>
            <span>{userInfo.value.username}</span>
            <DownOutlined class={styles.downIcon} />
          </div>
        </a-dropdown>
      </>
    )

    const Components = () => (
      <>
        <div class={styles.header}>
          <div class={styles['header-left']}>
            <Left />
          </div>
          <div class={styles['header-right']}>
            <Right />
          </div>
        </div>
        {/* 菜单搜索 */}
        <Teleport to="body">
          {
            menuSearchVisible.value && <div class={styles.menuSearch} onClick={() => { menuSearchVisible.value = false }}>
              <div class={styles.menuSearchContainer} onClick={(e: any) => { e.stopPropagation() }}>
                <MenuSearch v-model={[menuSearchVisible.value, 'menuSearchVisible']} />
              </div>
            </div>
          }
        </Teleport>
      </>
    )
    return {
      Components,
    }
  },
  render() {
    return <this.Components></this.Components>
  },
})